<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<title>图片轮播</title>
<style>
  .bottomTip{
      display: inline-block;
      vertical-align: top;
      margin-right: .1rem;
	  margin-left: .1rem;
	  padding-left: 0
	}
  .bottomTip ol{
	  display: inline-block;
	  padding-left: .4rem;
	  padding-right: .4rem}
  .prev{
	  display: inline-block;
	  vertical-align: top
	}
  .next{
	  display: inline-block;
	  vertical-align: top
	}
  .on{
	  color: #ffffff;
	  background-color:rgb(158,9,9)}
  /*CSS3动画*/
  .contentBox{
	  position: relative;
	  width: 90%;max-width: 900px;
	  overflow: hidden;
	  margin: 0 auto}
  .slideBox{
	  height: 55vh;
	  width: 100%
	}
  .slideBox>img{
	  width: 100%;
	  position: absolute;
	  top: 0;}
  .slide-trans-enter-active{
	  transition: all 3s
	}
  .slide-trans-enter{
	  transform:translateX(100%)
	}
  .slide-trans-old-leave-active{
	  transition: all 3s;
	  transform: translateX(-100%)
	}
</style>
</head>
	
<body>
<div id="vueBox">
  <div @mouseover="clearInv" @mouseout="runInv" class="contentBox">
      <div class="slideBox">
          <transition name="slide-trans"><img v-if="isShow" :src="slides[nowIndex].src" alt=""></transition>
          <transition name="slide-trans-old"><img v-if="!isShow" :src="slides[nowIndex].src" alt=""></transition>
      </div>
      <div style="text-align: center">
          <p class="prev" v-on:click="goto(prevIndex)">前一页</p>
          <ul class="bottomTip">
              <ol v-for="(item,index ) in slides" v-on:click="goto(index)" :class="{on:index==nowIndex}">{{ index+1 }}</ol>
          </ul>
          <p class="next" v-on:click="goto(nextIndex)">后一页</p>
      </div>
  </div>
</div>

<script src="vue.js"></script>
<script>
  var app=new Vue({
      el: '#vueBox',
      data:{
          slides:[
              {src:'image/01.jpg', href:'', title:'丹巴藏寨'},
              {src:'image/02.jpg', href:'', title:'拉萨郊外'},
              {src:'image/03.jpg', href:'', title:'圣湖传说'},
              {src:'image/04.jpg', href:'', title:'最美的草原'},
          ],
          nowIndex:0,  //当前页数
          isShow:true,
          inv:3500     //轮播图切换时间
      },
      computed : {       //计算属性
          prevIndex(){  //监听向前的动作，做出前移
              //this.nowIndex==0 说明当前是第一页，在往前移就是最后一页 
              // slides数组的最后一个元素，返回this.slides.length-1
              if(this.nowIndex==0){
                  return this.slides.length-1
              }else {
                  return this.nowIndex-1
              }
          },
          nextIndex(){ //监听向后的动作，做出后移
              //同样如果是最后的话在后移，就到数组第一个元素了
              if(this.nowIndex==this.slides.length-1){
                  return 0
              }else {
                  return this.nowIndex+1
              }
          }
      },
      methods:{
          back () {
              this.$router.push('/')
          },
          goto(index){
              this.isShow=false;
              setTimeout(()=>{
                  this.isShow=true;
                  this.nowIndex=index;
              },200)
          },
          runInv(){  //设置幻灯片的计时器函数
              this.invId= setInterval(()=>{
                  this.goto(this.nextIndex)
              },this.inv)
          },
          clearInv(){  //停止轮播
              clearInterval(this.invId)
          }
      },
      mounted(){  //再生成后调用计时器函数，
          this.runInv()
      }
  });
</script>
</body>
</html>

